Imágenes efecto rollover con texto

Siguiendo el tema de días anteriores sobre mostrar texto oculto en una imagen otra vez hacemos uso de CSS y además de utilizar rollover también se utilizará la propiedad opacity.

Los estilos los podemos añadir en la plantilla antes de ]]></b:skin> pero debemos tener en cuenta que la imagen se añade en los estilos, es decir, que si vamos a utilizar este efecto en varias ocasiones con distinta imagen y distinto tamaño es conveniente añadir los estilos en la misma entrada cambiando el nombre de la clase.

Editamos nuestra entrada y añadimos el html que incluirá el texto:

<div class="rollover_img"><a title=""href="url-enlace-de-la-imagen">
<span> Texto...</span></a></div>

Al final de la entrada añadimos los estilos y la url de la imagen:

<style> .rollover_img {
width: 280px;
height: 150px;
background-image: url(url-imagen);
background-position: top;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border:10px solid #ccc;
font:13px normal Arial, Helvetica, sans-serif;
line-height:18px;
float:left;
margin:0 10px 10px 0;
}
.rollover_img a {
color: #fff;
width: 280px;
height: 150px;
display: block;
text-decoration: none;
}
.rollover_img a:hover {
background:#000;
opacity:.60;
filter:alpha(opacity=60);
}
.rollover_img a span {
display: none;
width: 280px;
padding:5px;
}
.rollover_img a:hover span {
display: block;
}
</style>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed condimentum. In volutpat. Vestibulum elit. Aenean eget enim vitae tellus bibendum pellentesque. Sed at est. Example Text, Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Si observamos los estilos veremos que la imagen tiene width: 280px (ancho) y height: 150px (alto) si por ejemplo creamos otra entrada y deseamos añadir una imagen distinta lo que haremos será añadir el ancho de nuestra imagen en width y el alto en height.
El ancho del contenido lo encontremos en width de rollover_img a span.
También tendríamos que cambiar el nombre de la clase por uno distinto porque de lo contrario esa nueva imagen que añadimos adquiere los estilos que tenemos añadidos y se mostraría la misma imagen repetidas veces.
Si añadimos la imagen 1 en una entrada y en los estilos le pusimos rollover.

.rollover_img {

.....

.....

.....

}

Para añadir una segunda imagen le ponemos otro nombre o una variante del mismo rolloverx.

.rolloverx_img {

.....

.....

.....

}

Ese cambio lo haríamos en todos los estilos, así como cambiar el tamaño de la imagen.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

REFERENCIA:Finding New & Better